<template>
  <el-menu default-active="1"
           ref="menu"
           class="el-menu-vertical-demo">
    <el-menu-item index="1"
                  @click="$router.push('/main/home')">
      <i class="el-icon-s-home"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-menu-item index="2"
                  @click="$router.push('/main/user')">
      <i class="el-icon-user-solid"></i>
      <span slot="title">用户管理</span>
    </el-menu-item>
    <el-menu-item index="3"
                  @click="$router.push('/main/goods')">
      <i class="el-icon-s-goods"></i>
      <span slot="title">商品管理</span>
    </el-menu-item>
    <el-menu-item index="4"
                  @click="$router.push('/main/task')">
      <i class="el-icon-s-flag"></i>
      <span slot="title">任务管理</span>
    </el-menu-item>
    <el-menu-item index="5"
                  @click="$router.push('/main/car')">
      <i class="el-icon-bicycle"></i>
      <span slot="title">车辆管理</span>
    </el-menu-item>
    <el-menu-item index="6"
                  @click="$router.push('/main/courier')">
      <i class="el-icon-truck"></i>
      <span slot="title">快递管理</span>
    </el-menu-item>
    <el-menu-item index="7"
                  @click="$router.push('/main/swiper')">
      <i class="el-icon-picture-outline-round"></i>
      <span slot="title">轮播图</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
export default {
  name: "Menu",
  watch: {
    $route: {
      handler (newVal, oldVal) {
        // console.log(newVal);
        // console.log(this.$refs);
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo {
  border: 0 solid #000;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(10px);
}
.el-menu-item:hover,
.el-menu-item:focus {
  background-color: rgba(255, 255, 255, 0.3);
}
.el-menu-item {
  border-radius: 10px;
}
.el-menu-item span {
  color: #ddd;
}
</style>